<template>
  <el-table
    :data="tableData"
    ref="multipleTableRef"
    border
    row-key="id"
    style="width: 100%"
    height="600"
    :header-cell-style="{ background: '#f5f7fa', color: '#606266', textAlign: 'center' }"
    :cell-style="{ textAlign: 'center' }"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column label="username" prop="username">
      <template #default="scope">{{ scope.row.username ? scope.row.username : '--' }}</template>
    </el-table-column>
    <el-table-column label="工号" prop="postIds">
      <template #default="scope">{{ scope.row.postIds ? scope.row.postIds : '--' }}</template>
    </el-table-column>
    <el-table-column label="手机号" prop="mobile" width="240" show-overflow-tooltip>
      <template #default="scope">{{ scope.row.mobile ? scope.row.mobile : '--' }}</template>
    </el-table-column>
    <el-table-column label="avatar" prop="avatar"
      ><template #default="scope">{{ scope.row.avatar ? scope.row.avatar : '--' }}</template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { getSalesManager } from '@/api/system/user'
import { ref } from 'vue'

const tableData = ref([])
onMounted(() => {
  getSalesManager().then((res) => {
    console.log(res, 'shuju')
    tableData.value = res
  })
})

const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}
</script>
